import React from 'react'
import {
    GoodsInfoWrapper,
    TabsWrapper,
} from './style'
import GoodsList from '../GoodsList'
import VideoList from '../VideoList'
import {Tabs} from 'antd-mobile'


export default function GoodsInfo(props) {
    const {activityKey,setActivityKey,goodsData,videoData}=props
    // console.log(activityKey);
    const tabItems=[
        {key:'chaodian',title:'潮店精选'},
        {key:'fenqi',title:'分期免息'},
        {key:'51yuan',title:'51元封顶'},
        {key:'haowu',title:'好物直播'},
        {key:'daren',title:'达人种草'},
    ]

  return (
    <GoodsInfoWrapper>
        <TabsWrapper>
            <Tabs 
                activeKey={activityKey} 
                onChange={
                    key=>{
                        const index=tabItems.findIndex(item=>item.key===key)
                        setActivityKey(tabItems[index].key)
                    }
                }>
                {
                    tabItems.map(item=>(
                        <Tabs.Tab title={item.title} key={item.key}/>
                    ))
                }
            </Tabs>
        </TabsWrapper>
        {['chaodian','fenqi','51yuan'].some(
            item=>item == activityKey) && <GoodsList goodsData={goodsData} activityKey={activityKey}/>}
        {activityKey == 'haowu' && <VideoList videoData={videoData} activityKey={activityKey}/>}
    </GoodsInfoWrapper>
  )
}
